.box {
  display: flex;
  /* 
  flex-wrap表示子元素的总宽度超出时是否允许换行
  wrap表示可以换行  
  */
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.box > div {
  /* 边框要算到总高宽里面 */
  box-sizing: border-box;
  border: 1px solid #ff0000;

  /* 
  压力布局默认会压迫子元素在一行上
  所有超出的宽度会无效
  */
  width: 25%;
}

.box1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.box1 > div {
  box-sizing: border-box;
  border: 1px solid #0000ff;
  width: 20%;
}

/* 
媒体查询 @media
screen 表示浏览器可视区域
and 后面是查询的表达式
max-width表示最大宽度，也就是宽度不超过该值
min-width表示最小宽度，也就是宽度不低于该值
下面的媒体查询表示当浏览器可视区域的宽度不超过768px的时候里面样式生效
*/
@media screen and (max-width: 768px) {
  .box1 > div {
    width: 50%;
  }
}

/* 769px到999px之间 */
@media screen and (min-width: 769px) and (max-width: 999px) {
  .box1 > div {
    width: 33.33333333%;
  }
}

/* 1000px到1366px之间 */
@media screen and (min-width: 1000px) and (max-width: 1366px) {
  .box1 > div {
    width: 25%;
  }
}

/* 
768px是一个特定的分辨率，手机不论分辨率多大
告诉浏览器的大小必然是低于该值 
*/

.desktop {
  display: block;
}

.phone {
  display: none;
}

@media screen and (max-width: 768px) {
  .desktop {
    display: none;
  }

  .phone {
    display: block;
  }
}
